<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>水平二级菜单</title>

        <style>

            *{margin: 0;padding: 0;}

            .demo{background:yellow;width: 100%;height: 35px;}

            nav{height: 35px;width: 1000px;margin: 0 auto;}

            nav ul li{list-style:none;float: left;}

            nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;text-align: center;color:black;}

            nav ul li ul li{float: none}

            nav ul li ul li a{color:black}

            nav ul li ul{display: none;}

            nav ul li:hover ul{display: block;}
            /*当鼠标放到上面时变色*/
            
            nav ul li a:hover{
            	background: red;
            }

        </style>

    </head>

    <body>

        <div class="demo">

            <nav>

                <ul>

                    <li><a href="#">菜单1</a>
                    	<!--二级菜单列表-->

                    <ul>

                        <li><a href="#">菜单1</a></li>

                        <li><a href="#">菜单1</a></li>

                        <li><a href="#">菜单1</a></li>

                        <li><a href="#">菜单1</a></li>

                    </ul>

                    </li>

                    <li><a href="#">菜单2</a>
                    	<!--二级菜单列表-->

                        <ul>

                            <li><a href="#">菜单2</a></li>

                            <li><a href="#">菜单2</a></li>

                            <li><a href="#">菜单2</a></li>

                        </ul>

                    </li>

                    <li><a href="#">菜单3</a>
								<!--二级菜单列表-->
                        <ul>

                            <li><a href="#">菜单3</a></li>

                            <li><a href="#">菜单3</a></li>

                            <li><a href="#">菜单3</a></li>

                            <li><a href="#">菜单3</a></li>

                        </ul>

                    </li>

                    <li><a href="#">菜单4</a>
							<!--二级菜单列表-->
                        <ul>

                            <li><a href="#">菜单4</a></li>

                            <li><a href="#">菜单4</a></li>

                            <li><a href="#">菜单4</a></li>

                        </ul>

                    </li>

                    <li><a href="#">菜单5</a>
							<!--二级菜单列表-->
                        <ul>

                            <li><a href="#">菜单5</a></li>

                            <li><a href="#">菜单5</a></li>

                            <li><a href="#">菜单5</a></li>

                            <li><a href="#">菜单5</a></li>

                            <li><a href="#">菜单5</a></li>

                        </ul>

                    </li>

               

                </ul>

            </nav>

        </div>

    </body>

</html>
